- 写在前面：
- 实现的逻辑是拍照上传调用后端封装好的身份证接口，然后同时调用七牛云接口把照片传过去以便后台管理系统审核看
- 1:首选需要这么一张页面
首先是布局（以下是wxml）
扫描身份证人像面 
扫描身份证国徽面 下一步
接着来写样式，要来就来全套不是，哈哈哈
/* pages/idcard/index.wxss */.idcard { text-align: center; margin: 100rpx auto;}.logo_disabled { /* background: #FADFCB; */ background: rgba(255, 173, 118, 0.40);}.logo_bg { background: #ffad76;}.idcard_front, .idcard_con { height: 370rpx; width: 580rpx;}.myCanvas { width: 600rpx; height: 450rpx; visibility: hidden; position: absolute;}.judgeCanvas { width: 2px; height: 2px; visibility: hidden;}.idcard_front_desc{ font-size: 30rpx; color: #666666; margin-top: 20rpx;}.submit { height: 80rpx; width: 622rpx; line-height: 80rpx; border-radius: 40rpx; text-align: center; color: #fff; font-size: 32rpx; margin: 50rpx auto 40rpx; /* background: #ffad76; */} 接着就是最重要的js了（我直接全选复制，各位见谅，封装的七牛云上传和wx.request在下面?）
// pages/idcard/index.jsconst util = require('../../utils/util.js');const qiniuUploader = require("../../utils/qiniuUploader");import api from '../../utils/api.js';const apiurl = 'https://yuesao.wutongdaojia.com';const imgPath = 'https://cdn.wutongdaojia.com/';Page({ /** * 页面的初始数据 */ data: { x: 0, y: 0, areaWith: 750, areaHeight: 750, idCardUrlFront: '../../imgs/front.png', idCardUrlBack: "../../imgs/back.png", imagewidth: '', imageheight: '', base64: '', islogo:false, headerImage: '', picValue: '', showMagnifyIdCard: false, hasServerMsg: false, auth: {}, // android: util.browser.versions.android }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { // helper.checkOrientation('judgeCanvas'); }, uploadImageFront() { var that = this // front 代表正面 that.checkIdCard(that, 'front', function(res) { wx.setStorageSync('address', res.address) wx.removeStorageSync('cardErrFront') wx.setStorage({ key: 'idcardFront', data: { address: res.address, birthday: res.birthday, code: res.code, name: res.name, nation: res.nation, sex: res.sex, } }) that.checkIsSuc() }) }, uploadImageBack() { var that = this // back 代表反面 that.checkIdCard(that, 'back', function(res) { wx.setStorageSync('issue', res.issue) wx.removeStorageSync('cardErrBack') wx.setStorage({ key: 'idcardBack', data: { expiryDate: res.expiryDate, // 结束日期 issue: res.issue, //签发籍贯 issueDate: res.issueDate, // 开始日期 } }) that.checkIsSuc() }) }, checkIsSuc() { var that = this var address = wx.getStorageSync('address') var issue = wx.getStorageSync('issue') if (address && issue) { that.setData({ islogo: true }) } }, checkIdCard(that, type, callback) { util.getUploadToken() wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function(res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths; that.qiniuUploader(that, tempFilePaths[0], function(res) { console.log(res) if (type == "front") { that.setData({ idCardUrlFront: imgPath + res.key }) wx.setStorageSync('idCardFrontUrl', imgPath + res.key) that.uploadFile(that, type, tempFilePaths, that.data.idCardUrlFront, function(res) { console.log(res) callback(res) }) } else { that.setData({ idCardUrlBack: imgPath + res.key }) wx.setStorageSync('idCardBackUrl', imgPath + res.key) that.uploadFile(that, type, tempFilePaths, that.data.idCardUrlBack, function(res) { console.log(res) callback(res) }) } }) // that.getIdcardInfo('front') } }) }, qiniuUploader(that, filePath, callback) { qiniuUploader.upload(filePath, (res) => { console.log(res) callback(res) }, (error) => { console.error('error: ' + JSON.stringify(error)); }, null, // 可以使用上述参数，或者使用 null 作为参数占位符 (progress) => { // console.log('上传进度', progress.progress) // console.log('已经上传的数据长度', progress.totalBytesSent) // console.log('预期需要上传的数据总长度', progress.totalBytesExpectedToSend) }, cancelTask => that.setData({ cancelTask }) ) }, /*图片上传*/ uploadFile(that, idCardSide, files, idCardUrl, callback) { wx.uploadFile({ url: apiurl + '/weixin/getIdcardInfo', //里面填写你的上传图片服务器API接口的路径 filePath: files[0], //要上传文件资源的路径 String类型 name: 'file', //按个人情况修改，文件对应的 key,开发者在服务器端通过这个 key 可以获取到文件二进制内容，(后台接口规定的关于图片的请求参数) header: { "Content-Type": "multipart/form-data" //记得设置 // "Content-Type": "image/jpeg" //记得设置 }, formData: { //和服务器约定的token, 一般也可以放在header中 'token': wx.getStorageSync('token'), 'idCardSide': idCardSide, 'idCardUrl': idCardUrl }, success: function(res) { //当调用uploadFile成功之后，再次调用后台修改的操作，这样才真正做了修改头像 console.log(JSON.parse(res.data)) var responce = JSON.parse(JSON.parse(res.data).data) if (res.status = 200) { if (responce.code == 1) { callback(responce.result) } else { wx.showToast({ title: responce.msg, icon: 'none', duration: 1000 }) if (idCardSide =="front"){ wx.setStorageSync('cardErrFront', responce.msg) }else{ wx.setStorageSync('cardErrBack', responce.msg) } return } } else { wx.showToast({ title: responce.msg, icon: 'none', duration: 1000 }) return } } }) }, submit() { var address = wx.getStorageSync('address') var issue = wx.getStorageSync('issue') var cardErrFront = wx.getStorageSync('cardErrFront') var cardErrBack = wx.getStorageSync('cardErrBack') if(!this.data.islogo) return // debugger if (cardErrFront) { wx.showToast({ title: '人像面'+cardErrFront+'，请重新上传', icon: 'none', duration: 1000 }) return } else if (cardErrBack){ wx.showToast({ title: '国徽面' + cardErrBack + '，请重新上传', icon: 'none', duration: 1000 }) return } else if (!address) { wx.showToast({ title: '请上传身份证人像面', icon: 'none', duration: 1000 }) return } else if (!issue) { wx.showToast({ title: '请上传身份证国徽面', icon: 'none', duration: 1000 }) return } else { wx.navigateTo({ url: '../editcard/index', }) } }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { wx.removeStorageSync('address') wx.removeStorageSync('issue') wx.removeStorageSync('cardErrFront') wx.removeStorageSync('cardErrBack') wx.removeStorage({ key: 'idcardFront', success: function(res) { console.log(res) }, }) wx.removeStorage({ key: 'idcardBack', success: function(res) { console.log(res) }, }) }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { },## 标题文字 ## /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { }}) 封装wx.request来了（api.js）
/** 使用方法 *@method ajax *@param{参数类型}参数名 参数说明 * Type：请求类型（get、post） * params：请求参数 * url：请求地址 */// http('dataUrl', param).then(res => {// ...// })const ajax = (Type, params, url) => { var methonType = "application/json"; // var https = "http://www.wutongdaojia.com" var https = "https://yuesao.wutongdaojia.com" var st = new Date().getTime() if (Type == "POST") { methonType = "application/x-www-form-urlencoded" } return new Promise(function (resolve, reject) { wx.request({ url: https + url, method: Type, data: params, header: { 'content-type': methonType, 'Muses-Timestamp': st, 'version': 'v1.0' // 版本号 // 'Muses-Signature': sign }, success: function (res) { // if (res.statusCode != 200) { // reject({ error: '服务器忙，请稍后重试', code: 500 }); // return; // } // resolve(res.data); wx.hideLoading() console.log(res) if (res.data.status == 200) { resolve(res.data); } else if (res.data.status == 400) { wx.showToast({ title: res.data.message, icon: 'none', duration: 1000 }) return } else if (res.data.status == 401){ wx.removeStorageSync('phone') wx.removeStorageSync('token') wx.showToast({ title: res.data.message, icon: 'none', duration: 1000, success:function(){ wx.navigateTo({ url: '../login/index', }) } }) return } else { //错误信息处理 wx.showToast({ title: '服务器错误，请联系客服', icon: 'none', duration: 1000 }) } }, fail: function (res) { // fail调用接口失败 reject({ error: '网络错误', code: 0 }); }, complete: function (res) { // complete } }) })}module.exports = { ajax: ajax} util.js
const qiniuUploader = require("./qiniuUploader");import api from './api.js';const getUploadToken = () => { var params = { token: wx.getStorageSync('token') } api.ajax("GET", params, "/weixin/getUploadToken").then(res => { console.log(res.data) initQiniu(res.data) });}// 初始化七牛相关参数const initQiniu = (uptoken) => { var options = { region: 'NCN', // 华北区 // uptokenURL: 'https://[yourserver.com]/api/uptoken', // cdn.wutongdaojia.com // uptokenURL: 'http://upload-z1.qiniup.com', // uptokenURL: 'https://yuesao.wutongdaojia.com/weixin/getUploadToken', // uptoken: 'xxx', uptoken: uptoken, // domain: 'http://[yourBucketId].bkt.clouddn.com', domain: 'image.bkt.clouddn.com', shouldUseQiniuFileName: false }; qiniuUploader.init(options);}export function didPressChooesImage(that, count, callback) { getUploadToken(); // 微信 API 选文件 wx.chooseImage({ count: count, success: function(res) { console.log(res) var filePath = res.tempFilePaths[0]; console.log(filePath) callback(filePath) // 交给七牛上传 } })}/** * 文件上传 * 服务器端上传：http(s)://up.qiniup.com * 客户端上传： http(s)://upload.qiniup.com * cdn.wutongdaojia.com */function uploader(file, callback) { initQiniu(); qiniuUploader.upload(filePath, (res) => { // 每个文件上传成功后,处理相关的事情 // 其中 info 是文件上传成功后，服务端返回的json，形式如 // { // "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98", // "key": "gogopher.jpg" // } // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html that.setData({ 'imageURL': res.imageURL, }); }, (error) => { console.log('error: ' + error); }, // , { // region: 'NCN', // 华北区 // uptokenURL: 'https://[yourserver.com]/api/uptoken', // domain: 'http://[yourBucketId].bkt.clouddn.com', // shouldUseQiniuFileName: false // key: 'testKeyNameLSAKDKASJDHKAS' // uptokenURL: 'myServer.com/api/uptoken' // } null, // 可以使用上述参数，或者使用 null 作为参数占位符 (res) => { console.log('上传进度', res.progress) console.log('已经上传的数据长度', res.totalBytesSent) console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend) });};module.exports = { initQiniu: initQiniu, getUploadToken: getUploadToken, didPressChooesImage: didPressChooesImage} - 如需帮助请加微信（18310911617） 备注：说明来意